<template>
  <div class="app-container table-container">
    <el-row>
      <el-col :span="24">
        <el-col :span="22">
          <el-form ref="queryForm" :model="searchDate" :inline="true" label-width="68px">
            <el-form-item label="订单号">
              <el-input
                v-model="searchDate.orderId"
                filterable
                placeholder="请输入订单号查询购票记录"
                size="small"
                @change="changeAuditState"
              />
            </el-form-item>
            <el-form-item label="用户名称">
              <el-input
                v-model="searchDate.buyerName"
                size="small"
                filterable
                placeholder="请输入用户名称查询购票记录"
                @change="changeAuditState"
              />
            </el-form-item>
            <el-form-item label="购票时间">
              <el-date-picker
                v-model="searchDate.purchaseDate"
                filterable
                type="daterange"
                range-separator="至"
                start-i="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="yyyy-MM-dd"
                @change="changeAuditState"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small" @cliclk="queryOrder">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>

    <el-col :span="2" type="flex" justify="end">
    <el-button type="primary" size="medium" style="width: 120px" @click="exportAble">导出
    </el-button>
    </el-col>
      </el-col>
    </el-row>
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="orderData"
      size="mini"
      border
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
      style="font-size: 16px;"
    >
      <el-table-column prop="orderId" label="订单号" min-width="70" />
      <el-table-column prop="buyerName" label="购买用户" min-width="50" />
      <el-table-column prop="selkTime" label="购票时间" min-width="50" />
      <!--            <el-table-column prop="purchaseCanal" label="购买渠道" min-width="50"></el-table-column>-->
      <el-table-column prop="merchName" label="商户名称" min-width="50" />
      <el-table-column prop="tictName" label="票务名称" min-width="70" />
      -
      <!--            <el-table-column prop="tictCode" label="票代码" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="startTime" label="预约时间" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="yardName" label="场地名称" min-width="50"></el-table-column>-->
      <el-table-column prop="purchaseNumber" label="购买数量" min-width="50" />
      <el-table-column prop="purchaseMoney" label="购买金额" min-width="50" />
      <el-table-column width="180" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="lookTict( scope.row )"
          >查看
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
    <div v-if="editDialogVisible">
    <el-dialog
      :before-close="cancelEditDlg"
      title="票务详情"
      :visible.sync="editDialogVisible"
      width="60%"
      append-to-body
    >
      <lookTict ref="lookTict" :tict-uuid="currentEdituuid" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditDlg">返 回</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'
import lookTict from './orderDetailList.vue'

export default {
  name: 'Orderlist',
  components: { lookTict },
  data() {
    return {
      editDialogVisible: false,
      currentEdituuid: '',
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      lookBoxShow: false,
      lookShow: false,
      uuid: '',
      orderData: [],
      searchDate: {
        buyerName: '',
        orderId: '',
        startTime:'',
        endTime:''
      },
      defaultAuditState: '',
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          orderId: '',
          buyerName: '',
          purchaseDate:[]
        }
      }
    }
  },
  mounted() {
    // 默认展示审核中的数据
    this.queryOrder(this.searchDate)
  },
  methods: {
    cancelEditDlg() {
      this.editDialogVisible = false
    },
    // 导出
    exportAble() {
      window.location.href = this.axios.defaults.baseURL+'/tck/kdi/tict/search/exportAll';
    },
    lookTict(val) {
      this.currentEdituuid = val.id
      this.editDialogVisible = true
    },
    editState(msg) {
      this.lookBoxShow = msg
      this.lookShow = msg
      this.userEdit = msg
      this.queryOrder()
    },
    //重置
    restart(){
      this.searchDate.buyerName=''
      this.searchDate.orderId=''
      this.searchDate.purchaseDate=''
      this.queryOrder(this.searchDate)
    },
    //查询
    changeAuditState() {
      this.queryOrder(this.searchDate)
    },
    // 获取所有数据
    queryOrder(param) {
      // 订单号
      this.orderPage.searchData.orderId = param.orderId
      // 用户名
      this.orderPage.searchData.buyerName = param.buyerName
      if(param.purchaseDate!=null&&param.purchaseDate!=''&&param.purchaseDate.length>=2){
      //购票时间
      this.orderPage.searchData.startTime=(param.purchaseDate)[0];
      this.orderPage.searchData.endTime=(param.purchaseDate)[1];
      }
      this.axios.request({
        method: 'get',
        url: './tck/order/tck-order/findAll',
        params: getDataForSP(this.orderPage)
      }).then(response => {
        this.orderData = response.data.data
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryOrder()
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryOrder()
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/table.scss";
.app-container{
.pagination{
padding: 10px 0;
}
}
</style>
